<template>
	<view class="hua_swiper">
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
			<view class="scroll-view_box1">
				<text class="title">今日话题</text>
				<view class="" style="margin-top: 15rpx;">
					<text class="title1">茅台神话</text>
				</view>
				<view class="">
					<text class="title2">白酒还能买吗？</text>
				</view>
				<view class="price">
					<text>点击参与</text>
				</view>
			</view>
			<view class="scroll-view_box2">
				<text class="title">有奖活动</text>
				<view class="" style="margin-top: 15rpx;">
					<text class="title1">有奖征文</text>
				</view>
				<view class="">
					<text class="title2">分享你最好看的</text>
				</view>
				<view class="price">
					<text>立即参与</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "adviser",
		data() {
			return {
	            scrolls: true,
				hua:[
					{id:0,name:"惠通保—重大疾病保险计划",tiele:'1年期重疾险,保130种疾病',price:"￥4.9/月起  立即购买"},
					{id:1,name:"惠通保—重大疾病保险计划",tiele:'1年期重疾险,保130种疾病',price:"￥4.9/月起  立即购买"},
					{id:2,name:"惠通保—重大疾病保险计划",tiele:'1年期重疾险,保130种疾病',price:"￥4.9/月起  立即购买"},
				]
			};
		},
		methods: {
			scroll() {
				console.log(123);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hua_swiper {
		box-sizing: border-box;
		margin-top: 20rpx;

		.scroll-view_H {
			width: 100vw;
			//border: 1rpx solid red;
			height: 234rpx;
			// 滚动模块
			white-space: nowrap;

			.scroll-view_box1 {
				width: 442rpx;
				height: 234rpx;
				// 让元素在一行显示
				display: inline-block;
				border-radius: 15rpx;
				margin-left: 20rpx;
				box-sizing: border-box;
				background: url('../../static/iamges/adviser_hua1.png') center center;
				padding:10rpx 20rpx;
                background-size: 100% 234rpx;
				&:nth-child(1) {
					margin-left: 0;
				}

				.title {
					
					color: #ff4658;
					//line-height: 60rpx;
					font-size: 20rpx;
				}
				.title1 {
					color: #333333;
					//line-height: 60rpx;
					font-size: 28rpx;
					//margin-top: 15rpx;
				}
				.title2 {
					color: #333333;
					//line-height: 60rpx;
					font-size: 34rpx;
					font-weight: bold;
				}
				.price {
					text {
						border-radius: 30rpx;
						background-color: #ff4658;
						color: #ffffff;
						margin-top: 10rpx;
						line-height: 90rpx;
						font-size: 28rpx;
						padding: 5rpx 20rpx;
					}
				}
			}
			.scroll-view_box2 {
				width: 442rpx;
				height: 234rpx;
				// 让元素在一行显示
				display: inline-block;
				border-radius: 15rpx;
				margin-left: 20rpx;
				box-sizing: border-box;
				background: url('../../static/iamges/adviser_hua2.png') center center;
				padding:10rpx 20rpx;
			    background-size: 100% 234rpx;
				&:nth-child(1) {
					margin-left: 0;
				}
			
				.title {
					
					color: #488bfc;
					//line-height: 60rpx;
					font-size: 20rpx;
				}
				.title1 {
					color: #333333;
					//line-height: 60rpx;
					font-size: 28rpx;
					//margin-top: 15rpx;
				}
				.title2 {
					color: #333333;
					//line-height: 60rpx;
					font-size: 34rpx;
					font-weight: bold;
				}
				.price {
					text {
						border-radius: 30rpx;
						background-color: #015bfd;
						color: #ffffff;
						margin-top: 10rpx;
						line-height: 90rpx;
						font-size: 28rpx;
						padding: 5rpx 20rpx;
					}
				}
			}
		}
	}
</style>
